<template>
	<view class="page select">
		<view class="screen screen-left select1">
			<view class="order">
				<view
					class="screen-item order_1"
					v-for="(screenItem, screenIndex) in myScreenList"
					:key="screenIndex"
					:style="myScreenList.length > 1 ? 'justify-content:center' : 'justify-content:space-between'"
					@click="show(screenIndex)"
					:class="screenIndex < myScreenList.length-1 ? 'screen-dividing-line':''"
				>
					<text class="screen-item-text">{{ screenItem.className }}</text>
					<image :src="curIndex == screenIndex ? '../../static/infoIco/24.png':'../../static/infoIco/23.png'"  mode="aspectFill" class="screen-item-img" v-if="myScreenList.length > 1"></image>
					<image :src="curIndex == screenIndex ? '../../static/infoIco/24.png':'../../static/infoIco/23.png'"  mode="aspectFill" class="screen-item-img-left" v-else></image>
				</view>
			</view>
		</view>
		<view v-if="curIndex == index" v-for="(item, index) in myScreenList" :key="index" class="order1-1" style="height: 800rpx; overflow: auto;">
			<view class="order1">
				<view @click="selectItem(index1, index)" v-for="(item1, index1) in item.data" :key="index1" :class="{ active: item1.status }">{{ item1.ClassName }}</view>
			</view>
		</view>
		<view class="" style="height:5px;background-color:#f8f8f8"></view>
	</view>
</template>

<script>
export default {
	name: 'Screen',
	data() {
		return {
			// isDropDown:true,
			myScreenList: [],
			curIndex: null,
			result: []
		};
	},
	props: {
		screenList: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	methods: {
		show(i) {
			if (this.curIndex == i) {
				this.curIndex = null;
			} else {
				this.curIndex = i;
			}
		},
		selectItem(i, j) {
			this.myScreenList[j].data.forEach(el => {
				el.status = false;
			});
			this.myScreenList[j].data[i].status = true;
			this.myScreenList[j].className = this.myScreenList[j].data[i].ClassName;
			this.curIndex = null;
			// var that = this;
			this.result.length = 0;
			this.myScreenList.forEach(el => {
				el.data.forEach(el1 => {
					if (el1.status) {
						el1 = Object.assign(el1,{classId:el.classId})
						this.result.push(el1);
					}
				});
			});
			this.$emit('change', this.result);
		}
	},
	watch: {
		screenList: function(newVal, oldVal) {
			this.myScreenList = newVal;
			console.log(newVal)
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('Screen.css');
	@font-face {
	  font-family: 'iconfont';
	  src: url('https://at.alicdn.com/t/font_2453967_lwt4zfkc2c.eot');
	  src: url('https://at.alicdn.com/t/font_2453967_lwt4zfkc2c.eot?#iefix') format('embedded-opentype'),
	  url('https://at.alicdn.com/t/font_2453967_lwt4zfkc2c.woff2') format('woff2'),
	  url('https://at.alicdn.com/t/font_2453967_lwt4zfkc2c.woff') format('woff'),
	  url('https://at.alicdn.com/t/font_2453967_lwt4zfkc2c.ttf') format('truetype'),
	  url('https://at.alicdn.com/t/font_2453967_lwt4zfkc2c.svg#iconfont') format('svg');
	}
.select{

	.select1{
		.order{
			width:calc(100%);
			display: flex;
			justify-content:space-between;
			.active1{

				
			}
			.order_1{

			}
			.order_2{

			}
			.order_3{
				margin-left: auto;
				position:relative;
				&::after{
					content: "\e6ed";
					font-size: 22rpx;
					position: absolute;
					font-family: "iconfont" !important;
					top: 2rpx;
				}
			}
		}
	}
	.order1-1{
		background-color: #fff;
		position: relative;
		z-index: 999;
		&>view{
			width: 690rpx;
			margin: 0 auto;
		}
		.handle{
			padding-bottom: 20rpx;
			display: flex;
			.left{
				width: 260rpx;
				height: 76rpx;
				background: #F8F8F8;
				border-radius: 40rpx;
				line-height: 76rpx;
				text-align: center;
				color: #999999;
				font-size: 28rpx;
			}
			.right{
				margin-left: auto;
				width: 400rpx;
				height: 76rpx;
				background: #c70109;
				border-radius: 40rpx;
				line-height: 76rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 28rpx;
			}
		}
		.gender,.age,.sign{
			.toptitle{
				color: #333333;
				font-size: 28rpx;
				display: block;
				padding-top: 30rpx;
				margin-bottom: 30rpx;
			}
			.gender1{
				display: flex;
				flex-wrap: wrap;
				view{
					width: 154rpx;
					height: 56rpx;
					background: #F8F8F8;
					border-radius: 30rpx;
					line-height: 56rpx;
					text-align: center;
					margin-right: 24rpx;
					margin-bottom: 24rpx;
					&:nth-child(4n){
						margin-right: 0;
					}
					text{
						color: #666666;
						font-size: 22rpx;
					}
				}
				.active{
					background-color: rgba(53,205,193,0.1);
					text{
						color: #c70109;
					}
				}
			}
		}
		// 城市选择
		.order1{
			width: 95%;
			//height: 500rpx;
			margin: 0 auto;
			background-color:#fff;
			//position: absolute;
			top: 80rpx;
			.active{
				color:#c70109;
				&::after{
					position: absolute;
					right: 0;
					font-family: "iconfont" !important;
					color: #c70109;
					font-size: 30rpx;
					font-style: normal;
					content: "\e6f5";
				}
			}
			&>view{
				width: 100%;
				height: 70rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 70rpx;
				color: #333333;
				opacity: 1;
				border-bottom: 1px solid #F2F2F2;
				position: relative;
				&:last-child{
					border-bottom: 0;
				}
				
			}
		}
	}
	.cur{
		color: #c70109;
	}
}
</style>
